/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:赵晨宇
 */

import React, {FC, useMemo} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import service from './service';
import {SysAppModel} from './data';
import Details from './components/Details';
import Edit from './components/Edit';
import ProTableCrud, {ProTableCrudOperate} from '@/components/ProTableCrud';
import useList, {ListOperate} from '@/hooks/useList';
import useDelete from '@/hooks/useDelete';
import {Switch,} from "antd";
import {hasPermission} from "@/utils/utils";
import config from "@/config";
import useDialog from "@/hooks/useDialog";

/** 系统应用模块 */
const SysAppPage: FC = () => {
  const editOperate = useDialog();
  const detailsOperate = useDialog();

  //List
  const listOperate = useList<SysAppModel>({
    onLoad: (params) => service.selectPageList(params),
    onExport: (params) => service.export(params),
  });

  //Delete
  const deleteOperate = useDelete<SysAppModel>({
    onDelete: (ids, _) => service.delete(ids.join()),
    onDeleteSucess: listOperate.handleReload,
  });

  //表格列
  const cols = useMemo(() => getCols(listOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<SysAppModel> = {
    cols,
    showCreate: hasPermission(config.permission.sysApp.insert),
    showEdit: hasPermission(config.permission.sysApp.update),
    showDelete: hasPermission(config.permission.sysApp.delete),
    showDetails: hasPermission(config.permission.sysApp.select),
    showExport: hasPermission(config.permission.sysApp.export),
    listOperate,
    editOperate,
    deleteOperate,
    detailsOperate,
    getEditElement: (props) => (<Edit {...props}/>),
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <ProTableCrud headerTitle="系统应用列表" rowKey="id" operate={tableOperate}/>
  );
};

/** 获取表格列 */
function getCols(listOperate: ListOperate<SysAppModel>): (ProColumns<SysAppModel>[]) {
  return [
    {
      title: '应用主键',
      dataIndex: 'id',
      hideInTable: true,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      formItemProps:{
        'placeholder':'应用主键',
      },
    },
    {
      title: '应用名称',
      dataIndex: 'name',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      formItemProps:{
        'placeholder':'应用名称',
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      initialValue: 'null',
      filters: undefined,
      align: 'center',
      valueEnum: {
        null: {text: '全部状态', status: 'Default'},
        true: {text: '启用'},
        false: {text: '禁用', status: 'Error'},
      },
      formItemProps:{
        'placeholder':'全部状态',
        'onSelect': listOperate.handleSearch,
      },
      render:(_,record)=>{
        return(<Switch size={"small"} checked={record.status} onClick={async ()=>{await service.updateStatus(record.id,record.status);
          listOperate.handleReload();}} key={record.id}/>)
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      formItemProps:{
        'placeholder':'备注',
      },
    },
  ]
}

export default SysAppPage;
